<template>
  <div class="base-container">
    <div class="container">
      <span style="flex: 1;color: #42578E;font-size: 16px;font-weight: bold">{{title}}</span>
      <span style="text-align: right;color: #8A919C;font-size: 14px;padding-top: 1px">{{feature}}</span>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'ProductItemHeader',
    props: ['title', 'feature'],
    data () {
      return {
        msg: ''
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .base-container {
    display: flex;
    flex-direction: column;
    background: white;
  }

  .base-container::after {
    content: "";
    display: inline-block;
    width: 100%;
    height: 1px;
    background: #F8F8F8;
    position: relative;
  }

  .container {
    display: flex;
    flex-direction: row;
    padding: 5px;
  }

  .container::before {
    content: "";
    display: inline-block;
    width: 3.5px;
    height: 18px;
    border-radius: 2px;
    background: #E16A53;
    margin-left: 9px;
    margin-top: 2px;
    margin-right: 9px;
    position: relative;
  }
</style>
